import React, { useState } from "react";
import ReactEcharts from "echarts-for-react";
import ChartsWrap from "components/charts/chartsWrap";
import { useEffect } from "react";

const HIVChart = ({ title = "数据展示", name = "", data = [] }) => {
  const [sarsData, setSarsData] = useState([]);
  useEffect(() => {
    let res = data.map(item => ({
      name: item.provinceShortName,
      value: item.currentConfirmedCount
    }));
    setSarsData(res);
  }, [data]);

  const getOption = () => {
    return {
      tooltip: {
        trigger: "item",
        formatter: function(e, t, n) {
          return 0.5 == e.value
            ? e.name + "：有疑似病例"
            : e.seriesName + "<br />" + e.name + "：" + e.value;
        }
      },
      visualMap: {
        min: 0,
        max: 1000,
        left: 26,
        bottom: 40,
        showLabel: !0,
        text: ["高", "低"],
        pieces: [
          {
            gt: 500,
            label: "> 500 人",
            color: "#7f1100"
          },
          {
            gte: 100,
            lte: 500,
            label: "100 - 499 人",
            color: "#ff5428"
          },
          {
            gte: 10,
            lt: 100,
            label: "10 - 99 人",
            color: "#ff8c71"
          },
          {
            gte: 1,
            lt: 10,
            label: "1 - 9 人",
            color: "#ffe0b2"
          },
          {
            value: 0,
            color: "#ffffff"
          }
        ],
        show: !0
      },
      geo: {
        map: "china",
        roam: !1,
        scaleLimit: {
          min: 1,
          max: 2
        },
        zoom: 1.23,
        top: 80,
        label: {
          normal: {
            show: !0,
            fontSize: "14",
            color: "rgba(0,0,0,0.7)"
          }
        },
        itemStyle: {
          normal: {
            // shadowBlur: 50,
            // shadowColor: 'rgba(0, 0, 0, 0.2)',
            borderColor: "rgba(0, 0, 0, 0.2)"
          },
          emphasis: {
            areaColor: "#81d4fa",
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            borderWidth: 1,
            shadowBlur: 30,
            shadowColor: "rgba(0, 0, 0, 0.3)",
            borderColor: "rgba(0, 0, 0, 0.3)"
          }
        }
      },
      series: [
        {
          name: "现存确诊病例",
          type: "map",
          geoIndex: 0,
          data: sarsData
        }
      ]
    };
  };

  return (
    <ChartsWrap title={title}>
      <ReactEcharts option={getOption()} />
    </ChartsWrap>
  );
};

export default HIVChart;
